<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <h3>事件监听</h3>
  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
  <button id="btn">点击改变文字颜色</button>
  <script>
    // 1. 获取 button 对应的 DOM 对象 要求1 事件源，事件发生在哪个对象身上
    
    // 2. 添加事件监听
   

    // 3. 只要用户点击了按钮，事件便触发了！！！
  </script>
  <button>点击</button>
  <script>
    // 需求： 点击了按钮，弹出一个对话框
    // 1. 事件源   按钮 
   const btn = document.querySelector('#btn')
    // 2.事件类型 点击鼠标   click 字符串
  //  btn.addEventListener('click',function () {
  //   let text = document.querySelector('#text')
  //   text.style.color='red'
  //  })
      // 3. 事件处理程序 弹出对话框
      btn.addEventListener('dblclick',function () {
    let text = document.querySelector('#text')
    text.style.color='pink'
   })



  </script>
</body>

</html>